Gatsby.js — Static Assets

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Importing Assets Directly into Files

We can import images directly into component files.

For example, we can write:

import React from "react"
import laptop from "../images/laptop.jpg"

const IndexPage = () => {
  return (
    <div>
      <img src={laptop} alt="laptop" />
    </div >
  )
}
export default IndexPage

We import the src/images/laptop.jpg file as a module.

Then we pass that directly as the value of the src prop of our img element.

And it’ll be displayed as an image.

We can also add images with CSS:

src/pages/index.css

.laptop {
  background-image: url(../images/laptop.jpg);
  height: 200px;
  width: 200px;
}

src/pages/index.js

import React from "react"
import './index.css'

const IndexPage = () => {
  return (
    <div className='laptop'>
    </div >
  )
}
export default IndexPage

We add the laptop class with the src/images/laptop.jpg set as the background image.

In index.js , we import the CSS and apply the class to the div.

So we’ll see the image displayed as the background image.

Querying for a File in GraphQL Using gatsby-source-filesystem

We can query for a file with GraphQL queries using the gatsby-source-filesystem plugin.

To do this, we write:

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
  ],
}

src/pages/index.js

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const IndexPage = () => {
  const data = useStaticQuery(graphql`
    {
      allFile(filter: { extension: { eq: "pdf" } }) {
        edges {
          node {
            publicURL
            name
          }
        }
      }
    }
  `)

  return (
    <div>
      <ul>
        {data.allFile.edges.map((file, index) => {
          return (
            <li key={`pdf-${index}`}>
              <a href={file.node.publicURL} download>
                {file.node.name}
              </a>
            </li>
          )
        })}
      </ul>
    </div >
  )
}
export default IndexPage

We add the gatsby-source-filesystem plugin with the path property to look for.

Then in index.js , we make the query for searching for files with extension pdf .

And we get the publicURL and name and render them in the JSX.

Now we see a link for the PDF files found, and we can download them by clicking them.

Using the Static Folder

We can also add assets to the static folder in our Gatsby project.

For example, we can write:

import React from "react"

const IndexPage = () => {
  return (
    <div>
      <img src={'/laptop.jpg'} alt="laptop" />;
    </div >
  )
}
export default IndexPage

to render the static/laptop.jpg file in our component.

We should use the static folder when we want to include assets that are outside the bundled code.

It’s also good for storing images that need to be dynamically referenced.

Conclusion

We can import assets directly into our components and also read them with plugins with Gatsby.